<template>
    <div class="index clearafter">
        <div class="paientinfo testlist">
            <table id="table1">
                <tr>
                    <th colspan="4">
                    <span>会员姓名:</span>
                    <span>{{name}}</span>
                    <button class="default w80" id="searchselftest" @click="addMonitor">新增监测</button>
                    <select v-model="bbb" id="selftestindex">
                            <option v-for="item in selftestindexdefServicelist" :value="item">{{item.monitoringItemName}}</option>
                        </select>
                        <button class="default w80" id="searchselftest" @click = "showcharts">走势图</button>
                    <br>
                        开始时间：
                        <input type="text" id="start1" v-model="params.startDate"> 结束时间：
                        <input type="text" id="end1" v-model="params.endDate">
                        <button class="default w80" id="searchselftest" @click="searchselftestbytime2">搜索</button><br>
                        
                    </th>
                </tr>
                <!-- <tr v-for="item in selftestlist">
                    <td>
                        <button class="default ok noradius">{{item.indexBelongName}}</button>
                    </td>
                    <td>
                        <p v-for="subitem in item.itemList">{{subitem.name}}：<span :class="{colorred:subitem.isDanger=='1'}">{{subitem.value}}</span>{{subitem.unit}}<span class="Danger" v-if="subitem.isDanger=='1'">危</span><span v-show="subitem.measure">措施：{{subitem.measure}}</span><span v-show="subitem.symptomlNameString">症状：{{subitem.symptomlNameString}}</span></p>
                    </td>
                    <td>
                        <button class="default greynobg okborder" @click="showcharts(item)" v-if="item.isshowchart==true">走势图</button>
                    </td>
                    <td>
                        <p>{{item.time.substr(0,10)}}</p>
                        <p>{{item.time.substr(10)}}</p>
                    </td>
                </tr> -->
                
            </table>
            <table>
                <tr>
                    <th>日期</th>
                    <th v-for = "item in data1.items">{{item.monitoringItemName}}{{item.monitoringItemUnit}}</th>
                </tr>
                <tr v-for = "item in data1.data">
                    <td>{{item.monitoringDate}}</td>
                    <td v-for = "list in item.dataList">{{list.monitoringValue}}</td>
                </tr>
            </table>
        </div>
        <!--模态框-->
        <div class="modal" id="charts">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" @click="closecharts">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">{{chartstit}}</h4>
                    </div>
                    <div class="modal-body" id="main">
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade bs-example-modal-lg" id="editmodule1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" >
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" @click = "turnOff">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">阳性指标录入</h4>
                    </div>
                    <form class="form-horizontal cb" role="form" id="selectmodule" v-on:submit.prevent="savemodule">
                        <div class="modal-body">
                            <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="start"></span>项目名称:</label>
                                        <div class="col-md-6">
                                            <select  v-model = "aaa" id="selftestindex" class="form-control" @change="change">
                                            <option v-for="item in programs" :value="item">{{item.monitoringItemName}}</option>
                                            </select>
                                        </div>
                            </div>
                            <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="start"></span>项目单位:</label>
                                        <div class="col-md-6">
                                            <input type="text"  v-model="list.monitoringItemUnit" class="form-control">
                                        </div>
                            </div>
                            <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="start"></span>开始时间:</label>
                                        <div class="col-md-6">
                                             
                                <input type="text" id="start2" v-model="list.monitoringDate" class="form-control">
                                        </div>
                            </div>
                            <div class="form-group">
                                        <label class="col-md-3 control-label"><span class="start"></span>监测值:</label>
                                        <div class="col-md-6">
                                            <input type="text"  v-model="list.monitoringValue" class="form-control">
                                        </div>
                            </div>
                            
                        </div>

                        <div class="modal-footer savebtn">
                            <button type="submit" class="default ok center">确认</button>
                        </div>
                    </form>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <div class="modal" id="charts1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" @click="closecharts">&times;</button>
                        <h4 class="modal-title" id="myModalLabel1">{{chartstit}}</h4>
                    </div>
                    <div class="modal-body" id="main1">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/laydate/laydate.js'
import 'assets/lib/laydate/need/laydate.css'
import 'assets/lib/laydate/skins/danlan/laydate.css'
import Public from 'assets/public.js'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/legend');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/markPoint');
require('echarts/lib/component/dataZoom');
import bootPage from 'components/BootPage.vue'

module.exports = {
    data() {
            return {
                name:"",
                params:{
                    mpiId:"",
                    endDate: "",
                    startDate: "",
                    monitoringItemId:0,
                },
                list:{
                    mpiId: "",
                    monitoringDate: "",//监测日期
                    monitoringItemId:"",//监测项目id
                    monitoringItemName: "1",//监测项目名称
                    personName: "",
                    monitoringValue: "",//监测值
                    monitoringItemUnit: ""//监测项目单位
                },
                programs:[],
                aaa:{
                    monitoringItemId:"",
                    monitoringItemName:"",
                    monitoringItemUnit:"",
                    status:""
                },
                bbb:{
                    monitoringItemId:"",
                    monitoringItemName:"",
                    status:""
                },
                selftestindexdefServicelist:[],
                data1:[
                    
                ],
                chartstit:"",
                data2:[],
            }
        },
        props: {
            //      "title":{
            //  type:String,
            //  default:"标题"
            // },

        },
        components: {
            bootPage
        },
        ready() {
            var that = this;
            var myDate = new Date(); //获取今天日期
            // this.param.endDate = Public.formatDate(myDate);
            this.params.endDate = Public.formatDate(myDate);
            this.list.monitoringDate = Public.formatDate(myDate);
            myDate.setDate(myDate.getDate() - 7);
            this.params.startDate = Public.formatDate(myDate);
            
            // 日历插件
            laydate({
                elem: '#start1',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调  
                    that.params.startDate = datas;
                }
            });
            // 日历插件
            laydate({
                elem: '#end1',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调  
                    that.params.endDate = datas
                }
            });
            laydate({
                elem: '#start2',
                fixed: true,
                max: laydate.now(),
                // min: laydate.now(-30),
                istoday: false,
                choose: function(datas) { //选择日期完毕的回调  
                   that.list.monitoringDate = datas
                }
            });

        },
        methods: {
            // 关闭趋势图弹框
                closecharts() {
                    $("#charts1").hide();
                    this.params.monitoringItemId=0;
                },
                //根据起始时间和结束时间搜索健康列表
                searchselftestbytime(item) {
                    var that = this;
                    this.params.mpiId = item.person.mpiId;
                    this.list.mpiId = item.person.mpiId;
                    this.name = item.person.personName;
                    this.list.personName = item.person.personName;
                    var myDate = new Date(); //获取今天日期
                    // this.param.endDate = Public.formatDate(myDate);
                    this.params.endDate = Public.formatDate(myDate);

                    myDate.setDate(myDate.getDate() - 7);
                    this.params.startDate = Public.formatDate(myDate);
                   
                        //  查询患者关联疾病的指标所属名称
                        $.when(Public.commonajax("coms.monitoringService", "queryMonitoringItemByMpiId", "["+JSON.stringify(this.params.mpiId)+"]"))
                            .done(function(res) {
                                if (res.code==200) {
                                that.bbb = res.body[0];
                                that.selftestindexdefServicelist = res.body;
                                }
                            
                            });
                                $.when(Public.commonajax("coms.monitoringService", "searchMonitoringList", "[" + JSON.stringify(that.params)+ "]"))
                            .done(function(res) {
                            
                                if (res.code==200) {
                                    for (var i = 0; i < res.body.data.length; i++) {
                                        res.body.data[i].monitoringDate = Public.formatDate(res.body.data[i].monitoringDate);
                                    }
                                    that.data1 = res.body;
                
                                }
                            })
                },
                searchselftestbytime2() {
                    var that = this;
                     $.when(Public.commonajax("coms.monitoringService", "searchMonitoringList", "[" + JSON.stringify(that.params)+ "]"))
                            .done(function(res) {
                                if (res.code==200) {
                                    for (var i = 0; i < res.body.data.length; i++) {
                                        res.body.data[i].monitoringDate = Public.formatDate(res.body.data[i].monitoringDate);
                                    }
                                    that.data1 = res.body;
                                    console.log(that.data1);
                                }
                            })
                    
                },
                showcharts() {
                    var that = this;
                    this.chartstit=this.bbb.monitoringItemName;
                    this.params.monitoringItemId=this.bbb.monitoringItemId;
                    $("#charts1").show();
                    // $("#charts1 .modal-dialog").css("width","700px");
                    $("#main1").height(430);
                    $("#main1").width(550);
                    var dataLength =[];
                    var legenddata=[];
                    var seriesdata = [];
                    var number = [];
                    var number1 = [];
                    legenddata.push(this.bbb.monitoringItemName);
                    $.when(Public.commonajax("coms.monitoringService", "searchMonitoringList", "[" + JSON.stringify(that.params)+ "]"))
                            .done(function(res) {
                                if (res.code==200) {
                                    var data2 = res.body.data;
                                   //  $.each(data2, function(index, el) {
                                   //      var temobj = {
                                   //      name: el.monitoringItemName,
                                   //      type: 'line',
                                   //      data: el.map(function(item) {
                                   //          return item.monitoringValue;
                                   //      })
                                   //  }
                                   //  seriesdata.push(temobj);
                                   // }) 
                                   for (var i = 0; i <data2.length; i++) {
                                        
                                            number.push(data2[i].dataList);
                                    
                                   }
                                   for (var i = 0; i < number.length; i++) {
                                       number1.push(number[i][0].monitoringValue);
                                   }
                                   for (var i =0; i<data2.length;i++) {
                                data2[i].monitoringDate=Public.formatDate(data2[i].monitoringDate);
                            dataLength.push(data2[i].monitoringDate);
                         }
                                   var temobj = {
                                    name:that.chartstit,
                                    type:'line',
                                    data:number1
                                   }
                                  seriesdata.push(temobj);
                                   var myChart = echarts.init(document.getElementById('main1'));
                   
                    console.log(dataLength);
                    console.log(seriesdata);
        // 指定图表的配置项和数据
                   myChart.setOption({
                                    title: {
                                        text: '',
                                    },
                                    tooltip: {
                                        trigger: 'axis'
                                    },
                                    legend: {
                                        data: legenddata,
                                        right: 20
                                    },

                                    xAxis: {
                                        type: 'category',
                                        boundaryGap: false,
                                        data: dataLength
                                    },
                                    yAxis: {
                                        type: 'value',
                                        axisLabel: {
                                            formatter: '{value}'
                                        }
                                    },
                                    dataZoom: [{
                                        type: 'slider',
                                        xAxisIndex: 0,
                                        filterMode: 'empty'
                                    }],
                                    series: seriesdata
                                });
                                }
                            })
                    
                    

                    // 使用刚指定的配置项和数据显示图表。
            
  
                },
            addMonitor:function(){
               $("#editmodule1").modal("show");
                         $("#editmodule1 .modal-dialog").css("width","500px");
                           var that = this;
                    $.when(Public.commonajax("coms.monitoringService", "findMonitoringItem", "[]"))
                .done(function(res) {
                    if (res.code == 200) {
                        that.aaa = res.body[0];
                        that.list.monitoringItemUnit = that.aaa.monitoringItemUnit;
                        that.list.monitoringItemName = that.aaa.monitoringItemName;
                        that.list.monitoringItemId = that.aaa.monitoringItemId;
                        console.log(that.aaa);
                        that.programs = res.body;
                    }
                });
            },
            change:function(){ 
                var that = this;
                console.log(this.aaa);
                that.list.monitoringItemUnit = that.aaa.monitoringItemUnit;
                        that.list.monitoringItemName = that.aaa.monitoringItemName;
                        that.list.monitoringItemId = that.aaa.monitoringItemId;
            },
            // change1:function(){
            //         var that = this;
            //             that.params.monitoringItemId = that.bbb.monitoringItemId;
            // },
            savemodule:function(){
                var that = this;
                if (that.list.monitoringValue=="") {
                    Public.ajaxPrompt("补全信息");
                }else{
                     $.when(Public.commonajax("coms.monitoringService", "addMonitoring", "["+JSON.stringify(that.list)+"]"))
                .done(function(res) {
                    if (res.code == 200) {
                        Public.ajaxPrompt("保存成功");
                        $("#editmodule1").modal('hide');
                         $.when(Public.commonajax("coms.monitoringService", "searchMonitoringList", "[" + JSON.stringify(that.params)+ "]"))
                            .done(function(res) {
                            
                                if (res.code==200) {
                                    
                                    that.data1 = res.body;
                                    console.log(that.data1);
                                }
                            })
                    }else{
                        Public.ajaxPrompt(res.msg);
                        $("#editmodule1").modal('hide');
                    }
                });
                }
            },
            turnOff:function(){
                $("#editmodule1").modal('hide');
                this.list.monitoringValue ="";
            }

        },
        events: {
            // 分页组件传回的表格数据
            'data' (data) {
                $.each(data, function(index, el) {
                    el.isshowchart = el.itemList.some(item =>
                        item.indexType == "01"
                    )
                });
                this.selftestlist = data;
                console.log(this.selftestlist);
            }
        },
}
</script>
<style scoped>
.paientinfo {
    padding-bottom: 20px;
    border-bottom: 1px dashed #EFEFEF;
    width: 90%;
    margin: 20px auto;
}

.paientinfo table {
    width: 100%;
}

.paientinfo #table1 td p span {
    display: inline-block;
    margin-left: 10px;
    height: 20px;
}
.paientinfo #table1{
    margin-bottom: 20px;
}
.paientinfo #table1 td .iphone {
    background: url(../assets/img/iphone.png) no-repeat left center;
    padding-left: 20px;
}

.paientinfo #table1 td .other {
    font-size: 12px;
    color: #999;
}

.paientinfo #table1 td .name {
    font-weight: 700;
}

.okborder {
    border: #1dc499 solid 1px;
    color: #1dc499;
    width: 80px
}

.noradius {
    border-radius: 0;
    width: 100px
}

.testlist {
    width: 90%;
    border-bottom: none;
    min-height: 500px
}

.testlist tr {
    border-bottom: 1px dashed #EFEFEF;
    padding: 15px 0
}

.testlist tr th {
    padding: 0 0 20px;
    font-weight: normal;
}

.testlist tr td {
    padding: 15px 0
}

#main {
    width: 600px;
    height: 400px
}

.testlist input {
    border: 1px solid #EFEFEF;
    margin: 0 20px 0 10px;
    padding: 3px 10px 3px 10px
}

#searchselftest {
    display: inline-block;
    color: #333
}

.Danger {
    height: 24px;
    width: 24px;
    color: #fff;
    background: #F8684E;
    display: inline-block;
    border-radius: 50%;
    font-size: 12px;
    text-align: center;
}

.colorred {
    color: #F8684E
}

#selftestindex {
    width: 100px;
    border: 1px solid #EFEFEF;
    margin-right: 10px;
}

.w80 {
    width: 80px
}
.paientinfo #table1 span:nth-child(1){
    font-size: 18px;
    color: #333333;
}
.paientinfo #table1 span:nth-child(2){
    font-size: 14px;
    color: #333333;
    margin-right: 30px;
    margin-bottom: 30px;
    display: inline-block;
}
 #table1 button{
    margin-right: 30px;
}
</style>
